<template>
	<view class="xilu-upload-page">
		<!-- 标题 -->
		<view class="xilu-upload-title-bar">
			<view class="title">上传作业</view>
		</view>

		<!-- 作业内容 -->
		<view class="xilu-card">
			<view class="card-title">作业内容</view>
			<textarea v-model="form.content" class="input-text" placeholder="请输入作业内容（必填）" maxlength="500"
				:auto-height="true" v-if="!isFlag"></textarea>
			<view class="coach-content" v-if="isFlag">{{ form.content }}</view>
			<view class="img-upload-area">
				<view v-for="(img, idx) in form.images" :key="idx" class="img-box">
					<image :src="web_url + img" class="img-preview" @click="clickOneImg(img)"></image>
					<view class="img-remove" @tap="removeImg(idx)" v-if="!isFlag">×</view>
				</view>
				<view class="img-box img-uploader" v-if="!isFlag && form.images.length < maxImg " @tap="chooseImg">
					<text class="iconfont icon-add">+</text>
				</view>
			</view>
			<view class="job-time" v-if="form.time">{{ form.time }}</view>
		</view>

		<!-- 老师评语 -->
		<view class="xilu-card">
			<view class="card-title">老师评语</view>
			<template v-if="coachForm.coach_text || (coachForm.coach_images && coachForm.coach_images.length)">
				<view class="coach-content" v-if="coachForm.coach_text">{{ coachForm.coach_text }}</view>
				<view class="img-upload-area" v-if="coachForm.coach_images && coachForm.coach_images.length"
					@click="clickCoachImg">
					<view v-for="(img, idx) in coachForm.coach_images" :key="idx" class="img-box">
						<image :src="web_url + img" class="img-preview"></image>
					</view>
				</view>
				<view class="job-time" v-if="coachForm.coach_time">{{ coachForm.coach_time }}</view>
			</template>

			<template v-else>
				<view class="teacher-comment placeholder">
					暂无评语
				</view>
			</template>

		</view>
		<!-- 提交按钮 -->
		<view class="btn-area">
			<button class="main-btn" @tap="submitHomework" v-if="!isFlag">提交作业</button>
			<button class="main-btn disabled" disabled v-if="isFlag">老师已评语不可再修改</button>
		</view>
	</view>
</template>
<script>
	import uploads from "@/util/upload.js";
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				form: {
					content: '',
					media: [], // {type: 'image'|'video', url: 'xxx'}
					time: ''
				},
				maxMedia: 5,
				teacherComment: '', // 假如后端返回
				maxImg: 6,
				order_id: '',
				order_goods_id: '',
				web_url: '',
				isFlag: false,
				coachForm: {
					coach_images: [],
					coach_text: '',
					coach_time: ''
				}
			}
		},
		onLoad(options) {
			console.log(options);
			this.order_id = options.id
			this.order_goods_id = options.goods_id
			this.web_url = webConfig.base_url || '';
			this.getOrderDetails()
		},
		methods: {
			clickCoachImg() {
				uni.previewImage({
					urls: this.coachForm.coach_images.map(item => {
						return this.web_url + item
					})
				})
			},
			clickOneImg(img) {
				uni.previewImage({
					urls: [this.web_url + img]
				})
			},
			clickImg() {

				uni.previewImage({
					urls: this.form.images.map(item => {
						return this.web_url + item
					})
				})
			},
			getOrderDetails() {

				this.$http({
					url: 'addons/xilufitness/order/getDetail',
					data: {
						id: this.order_id,
						goods_id: this.order_goods_id
					},
					method: 'get'
				}).then(res => {
					let detail = res.data.info.result_detail
					let status = res.data.info.goods.result_status
					this.form.content = detail.user_text
					this.form.images = detail.user_images ? detail.user_images.split(',') : []
					this.form.time = detail.user_time
					if (status == 4) {
						this.coachForm.coach_text = detail.coach_text
						this.coachForm.coach_images = detail.coach_images ? detail.coach_images.split(',') : []
						this.coachForm.coach_time = detail.coach_time
						this.isFlag = true
					}
				})




			},
			chooseMedia() {
				if (this.form.media.length >= this.maxMedia) {
					uni.showToast({
						title: '最多只能上传5个文件',
						icon: 'none'
					});
					return;
				}
				uni.showActionSheet({
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.chooseImg();
						} else if (res.tapIndex === 1) {
							this.chooseVideo();
						}
					}
				});
			},
			chooseImg() {
				let remain = this.maxMedia - this.form.media.length;
				this.$api.chooseFile(remain, (res) => {
					res.forEach(file => {
						uploads.uploadFile(file.tempFilePath, (uploadRes) => {
							if (uploadRes.code == 1) {
								this.form.media.push({
									type: 'image',
									url: uploadRes.data.url
								});
							} else {
								this.$api.toast(uploadRes.msg || '图片上传失败');
							}
						});
					});
				}, 'image');
			},
			chooseVideo() {
				let remain = this.maxMedia - this.form.media.length;
				uni.chooseVideo({
					count: remain,
					sourceType: ['album', 'camera'],
					success: (res) => {
						uploads.uploadFile(res.tempFilePath, (uploadRes) => {
							if (uploadRes.code == 1) {
								this.form.media.push({
									type: 'video',
									url: uploadRes.data.url
								});
							} else {
								this.$api.toast(uploadRes.msg || '视频上传失败');
							}
						});
					},
					fail: () => {}
				});
			},
			// chooseImg() {

			// 	let _this = this;
			// 	if (this.form.images.length > 6) {
			// 		uni.showToast({
			// 			title: '图片不得超过六张',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}
			// 	this.$api.chooseFile(1, function(res) {
			// 		console.log(res);
			// 		uploads.uploadFile(res[0].tempFilePath, function(uploadRes, uploadTask) {
			// 			console.log(uploadRes, uploadTask);
			// 			if (uploadRes.code == 1) {
			// 				_this.form.images.push(uploadRes.data.url)
			// 				console.log('images', _this.form.images);
			// 			} else {
			// 				_this.$api.toast(uploadRes.msg || '上传失败')
			// 			}
			// 		});
			// 	})
			// },
			removeImg(idx) {
				this.form.images.splice(idx, 1)
			},
			submitHomework() {
				if (!this.form.content.trim()) {
					uni.showToast({
						title: '请填写作业内容',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中'
				})
				console.log(this.order_id);
				this.$http({
					url: 'addons/xilufitness/order/effectOrder',
					data: {
						order_id: this.order_id,
						goods_id: this.order_goods_id,
						content: this.form.content,
						image: this.form.images
					},
					method: 'post'

				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					if (res.code == 1) {
						setTimeout(() => {
							this.$api.navigate("../booking/booking")
						}, 2000)
					}


				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.xilu-upload-page {
		min-height: 100vh;
		background: #191a1c;
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}

	.xilu-upload-title-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		font-size: 36rpx;
		font-weight: 600;
		color: #ffd700;
		letter-spacing: 2rpx;
		margin-bottom: 10rpx;
	}

	.xilu-card {
		background: #292b2c;
		border-radius: 20rpx;
		margin: 26rpx 22rpx 0 22rpx;
		padding: 24rpx 26rpx 30rpx 26rpx;
		box-sizing: border-box;
	}

	.card-title {
		font-size: 28rpx;
		color: #ffd700;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.input-text {
		width: 100%;
		min-height: 300rpx;
		background: #222223;
		color: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		font-size: 28rpx;
		margin-bottom: 18rpx;
		border: none;
		outline: none;
		resize: none;
	}

	.img-upload-area {
		display: flex;
		flex-wrap: wrap;
		gap: 14rpx;
		margin-bottom: 0; // 紧贴下方
	}

	.img-box {
		width: 112rpx;
		height: 112rpx;
		border-radius: 12rpx;
		background: #333;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img-preview {
		width: 112rpx;
		height: 112rpx;
		object-fit: cover;
		border-radius: 12rpx;
	}

	.img-remove {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0, 0, 0, .5);
		color: #ffd700;
		width: 38rpx;
		height: 38rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 32rpx;
		border-radius: 0 0 0 12rpx;
		z-index: 2;
	}

	.img-uploader {
		background: #232325;
		border: 2rpx dashed #555;
		cursor: pointer;
	}

	.icon-add {
		color: #ffd700;
		font-size: 44rpx;
	}

	.job-time {
		font-size: 22rpx;
		color: #888;
		text-align: right;
		margin-top: 10rpx;
	}

	.coach-content {
		font-size: 27rpx;
		color: #fff;
		margin-bottom: 10rpx;
		word-break: break-all;
	}

	.teacher-comment.placeholder {
		color: #888;
		font-size: 27rpx;
		padding: 10rpx 0;
	}

	.btn-area {
		margin: 38rpx 22rpx 0 22rpx;
	}

	.main-btn {
		background: #ffd700;
		color: #222223;
		font-size: 30rpx;
		font-weight: 600;
		border-radius: 12rpx;
		height: 84rpx;
		line-height: 84rpx;
		box-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.06);
		margin: 0;
	}

	.main-btn.disabled {
		background: #999;
		color: #fff;
	}
</style>